<!doctype html>
<head>
<title>LearnHilo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
</style>
</head>
<body>
<div id="containerElem"></div>
<script type="text/javascript" src="./hilo-standalone.min.js"></script>
<script type="text/javascript">
    var Bird = Hilo.Class.create({
        // Extends: Animal,
        Mixes: Hilo.EventMixin,
        constructor: function(name) {
            this.name = name;
        },
        fly: function() {
            console.log("I am flying");
        },
        Statics: {
            isBird: function(bird) {
                return bird instanceof Bird;
            }
        }
    });
    var swallow = new Bird("swallow");

    Hilo.Class.mix(swallow, {color: "red"});

    console.log(swallow);

    swallow.fly();
    Bird.isBird(swallow);

    // 创建舞台
    // 舞台Stage是一个各种图形、精灵动画等的总载体。
    // 可见的对象都要添加到舞台或其子容器后，才会被渲染出来
    var stage = new Hilo.Stage({
        renderType:'canvas',
        container: 'containerElem',
        width: 320,
        height: 480
    });

    var ticker = new Hilo.Ticker(60);
    ticker.addTick(stage);
    ticker.start();

    var bird = new Hilo.Bitmap({
        image: 'images/icon.jpg'
    }).addTo(stage);

    stage.enableDOMEvent(Hilo.event.POINTER_START, true);

    bird.on(Hilo.event.POINTER_START, function(e){
        console.log(e.eventTarget, e.stageX, e.stageY);
    });
</script>
</body>

</html>